/*
 * Copyright © 2017 Cask Data, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not
 * use this file except in compliance with the License. You may obtain a copy of
 * the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations under
 * the License.
*/
$element-selected-color: #dbdbdb;
$border-color: #cccccc;
$dark-border-color: #999999;
$option-hover-bg-color: #eeeeee;

@import '../../../../styles/variables.scss';

.columns-tab {
  height: 100%;

  .columns-tab-heading {
    height: 40px;
    display: flex;
    align-items: center;
    padding: 5px 0 5px 10px;
    border-bottom: 1px solid $border-color;

    #toggle-all-dropdown {
      cursor: pointer;
      margin-right: 10px;

      &.expanded {
        background-color: $element-selected-color;
      }
    }

    .search-box {
      position: relative;
      flex: 1;

      .form-control {
        display: inline-block;
        border-radius: 13px;
        height: 26px;

        width: 100%;
        padding-right: 25px;
      }

      .fa {
        position: absolute;
        right: 9px;
        top: 5px;
        color: $dark-border-color;
        font-size: 13px;
        line-height: 1.25;
        &.fa-times-circle {
          cursor: pointer;
        }
      }
    }

  }

  .columns-list {
    height: calc(100% - 40px);
    overflow-y: auto;

    .table {
      background: transparent;
      margin-bottom: 0;

      thead {
        tr {
          th {
            border-top: 0;
          }
        }
      }
      tbody {
        tr {
          cursor: pointer;
          &:not(.column-tab-details) {
            td {
              &:nth-child(2),
              &:nth-child(3) {
                width: 5%;
              }
              &:nth-child(4) {
                width: 70%;
                max-width: 250px;
                overflow: hidden;
                text-overflow: ellipsis;
                position: relative;
              }
              &:nth-child(5) {
                width: 10%;
              }
            }
          }
          &.column-tab-details {
            background: $element-selected-color;
            border-left: 3px solid;

            td { padding-right: 5px; }

            .table {
              background: transparent;
            }
          }
          &.selected {
            background-color: $element-selected-color;
          }
          &.is-new-appear {
            td {
              border-top-width: 1px;
              border-top-style: solid;
              border-top-color: $green-02;
              border-bottom-width: 1px;
              border-bottom-style: solid;
              border-bottom-color: $green-02;

              &.column-name:after {
                content: "ADDED";
                position: absolute;
                right: 0px;
                font-weight: bold;
                font-variant: small-caps;
                color: $grey-03;
                opacity: 1;
              }
            }
          }
          &.is-new-appear-active {
            td {
              border-top-color: #dee2e6;
              border-bottom-color: #dee2e6;
              transition: all 3s 1s;

              &.column-name:after {
                opacity: 0;
                transition: opacity 3s 1s;
              }
            }

            &:last-of-type {
              td {
                border-bottom-color: transparent;
              }
            }

          }
        }
      }
      &.table-sm {
        td,
        th {
          color: #373a3c;
          padding: 0.3rem;
        }
      }

      .statistics-table {
        th:last-child {
          min-width: 100px;
        }
      }
    }

    .columns-tab-toggle-all-dropdown {
      .columns-tab-dropdown-toggle {
        border: 0;
        padding: 3px 0px;
        transform: translateX(-2px);

        &:hover,
        &:focus,
        &.active,
        &:active {
          background-color: initial;
          outline: 0;
        }

        &.active,
        &:active {
          box-shadow: initial;
        }
      }

      .dropdown-menu {
        padding: 0;
        min-width: 5rem;

        .toggle-all-option {
          padding: 5px 10px;

          &:hover {
            cursor: pointer;
            background-color: $option-hover-bg-color;
          }
        }

        &:focus {
          outline: 0;
        }
      }
    }
  }

  &.empty-search-container {
    height: auto;
  }

  .empty-search {
    font-size: 18px;
    font-weight: 500;
    margin-left: auto;
    margin-right: auto;
    margin-top: 25vh;
    max-width: 80%;
    word-wrap: break-word;

    hr {
      color: #999999;
      background-color: #999999;
    }
    span {
      font-size: 14px;
    }
    ul {
      padding: 0;
      list-style: none;
      font-size: 14px;
      .link-text {
        cursor: pointer;
        color: var(--brand-primary-color);
      }
    }
  }
}
